<template>
  <div class="printForm">
    <div class="area-header">
      <span class="area-header-title">{{ $t('申请单') }}</span>
    </div>
    <table class="printTable">
      <tr>
        <td class="tit">{{ $t('申请标题') }}</td>
        <td colspan="3">{{ form.actTitle }}</td>
      </tr>
      <tr>
        <td class="tit">{{ $t('申请人') }}</td>
        <td>
          {{ form.userName }}
        </td>
        <td class="tit">{{ $t('申请时间') }}</td>
        <td>{{ parseTime(form.applyTime) }}</td>
      </tr>
      <tr>
        <td class="tit">{{ $t('报销总额(元)') }}</td>
        <td>{{ moneyFormat(form.amountMoney) }}</td>
        <td class="tit"> {{ $t('费用明细汇总额(元)') }} </td>
        <td>{{ moneyFormat(form.totalCostBreakdown) }}</td>
      </tr>
      <tr v-if="form.payCompletionTime !== null && form.payCompletionTime !== '' && form.payCompletionTime !== undefined">
        <td class="tit">{{ $t('付款完成时间') }}</td>
        <td colspan="3">
          {{ parseTime(form.payCompletionTime) }}
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('费用说明') }}</td>
        <td colspan="3">
          {{ form.costsThat }}
        </td>
      </tr>
    </table>
    <div v-if="form.oaExpenseInvestorList && form.oaExpenseInvestorList.length > 0">
      <div class="area-header">
        <span class="area-header-title">{{ $t('分摊明细') }}</span>
      </div>
      <table class="previewTable">
        <thead>
          <th>{{ $t('主体类型') }}</th>
          <th>{{ $t('费用主体') }}</th>
          <th>{{ $t('承担部门') }}</th>
          <th>{{ $t('费用类型') }}</th>
          <th>{{ $t('金额(元)') }}</th>
        </thead>
        <tbody>
          <tr v-for="(v, ind) in form.oaExpenseInvestorList" :key="ind">
            <td>
              <dictSelect
                v-model="v.mainType"
                :is-echo="true"
                dictionary="main_body_type_all"
              />
            </td>
            <td>
              <MainBodySelect
                v-model="v.subject"
                :is-echo="true"
                :parameters="v.mainType"
                :show-label="false"
              />
            </td>
            <td><DeptSelect v-model="v.department" /></td>
            <td>
              <el-cascader v-model="v.typeArray" :options="getFdSubjectList" clearable>
                <template slot-scope="{ node, data }">
                  <span>{{ $t(data.label) }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </td>
            <td>{{ moneyFormat(v.money) }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-if="form.oaExpenseList && form.oaExpenseList.length > 0">
      <div class="area-header" style="margin-top:10px;">
        <span class="area-header-title">{{ $t('费用明细') }}</span>
      </div>
      <table class="previewTable">
        <thead>
          <th>{{ $t('发票') }}</th>
          <th>{{ $t('金额(元)') }}</th>
          <th>{{ $t('发生日期') }}</th>
          <th>{{ $t('发票代码') }}</th>
          <th>{{ $t('备注') }}</th>
        </thead>
        <tbody>
          <tr v-for="(v, ind) in form.oaExpenseList" :key="ind">
            <td>
              <span v-if="v.fileList">
                {{ v.fileList.name }}
              </span>
              <span v-else>-</span>
            </td>
            <td>{{ moneyFormat(v.money) }}</td>
            <td>{{ parseTime(v.time) }}</td>
            <td>{{ v.invoiceCode }}</td>
            <td>{{ v.remark }}</td>
          </tr>
        </tbody>
      </table>

    </div>
    <!-- 附件列表 -->
    <FileView :list.sync="form.fileList" data-type="oa_expense" />

  </div>
</template>

<script>
import { getOaExpense } from '@/api/oa/expense/oaExpense'
import { getFdSubjectList } from '@/api/fd/config/getTypeMain'
import MainBodySelect from '@/components/MainBodySelect'
export default {
  components: {
    MainBodySelect
  },
  data() {
      return {
          // 表单参数
          form: {
            // 当前用户
            userId: undefined,
            // 附件列表
            fileList: [],
            oaExpenseList: []
          },
          // 费用类型
          getFdSubjectList: []
      }
  },
  created() {
    // 费用类型
    getFdSubjectList('expense').then(response => {
      this.getFdSubjectList = this.changeSubjectList(response.data)
    })
  },
  mounted() {
      this.$bus.$emit('async_done')
  },
  methods: {
    changeSubjectList(val) {
      const arr = []
      if (val.length !== 0) {
        val.forEach(item => {
          const obj = {}
          obj.value = item.value
          obj.label = this.$t(item.label)
        if (item.children && item.children.length > 0) {
            obj.children = this.changeSubjectList(item.children)
          }
          arr.push(obj)
        })
      }
      return arr
    },
    // 初始化数据
    init(data) {
      if (data != null && data !== '' && data.id !== undefined) {
          getOaExpense(data.id).then(response => {
              this.form = response.data
          })
      } else {
        this.reset()
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        userId: this.$store.state.user.userId,
        applyTime: new Date(),
        amountMoney: undefined,
        costsThat: undefined,
        actId: undefined,
        actStatus: '',
        remark: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        payCompletionTime: undefined,
        delFlag: undefined,
        oaExpenseList: [],
        fileList: undefined,
        getFdSubjectList: []
      }
      this.resetForm('form')
    }

  }
}
</script>

